<template>
  <div class="flex p-5">
    <n-avatar :size="40" :src="item.user.avatar"/>

    <div class="ml-2 flex-1">
      <h4>{{ item.user.name }}</h4>
      <small class="text-gray-500">
        <n-time :time="new Date(item.created_time)" type="datetime"/>
      </small>

      <p class="my-3">
        <n-tag v-if="item.reply_user" :bordered="false" size="small" style="opacity: 0.5;">
          @ {{ item.reply_user.username }}
        </n-tag>
        {{ item.content }}
      </p>

      <n-button secondary size="small" strong>回复</n-button>

      <n-divider/>

      <slot/>

    </div>
  </div>
</template>
<script lang="js" setup>
import {NAvatar, NButton, NDivider, NTag, NTime} from "naive-ui"

const props = defineProps({
  item: {
    type: Object,
    default: () => {
    }
  }
})
</script>
<style scoped>

</style>
